import Vue from 'vue'
import VueRouter from 'vue-router' //导入自己的Router路由 
Vue.use(VueRouter)//vue.use声明一下
/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 * 5 url 传递参数时to="/params/111/222" 
 *   读取参数时  {{$route.params.aaa}}
 *   {{JSON.stringify($route,null,2)}} <br>
 * 6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
 * 7 a链接上色==》 a.router-link-active
 */
let zyi=`
1 $route.params.id不是router {{$route.name}} <br>
2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
3 路由的时候要加s routes==!router(x错误)<br>
4 在写路由components的一定要写复数 加s <br>
5 url 传递参数时to="/params/111/222" 
  读取参数时  {{$route.params.aaa}}
  {{JSON.stringify($route,null,2)}} <br>
6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
7 a链接上色==》 a.router-link-active
`

const users={template:`<div class="asdf">
                        <h2>users</h2> 
                        <router-view ></router-view>
                     </div>`}
const home={template:`<div>home</div>`}
const user={template:`<div class="asdf">
                     {{$route.params.username}}
                  </div>`}



const router=new VueRouter({
        mode:'history',
        base:'__dirname',
        routes:[
            {path:'/',name:'home', component:home}, 
            {
                path:'/users',
                component:users,
                children:[
                  {path:'/',component:users},
                  {path:'/username',name:'user', component:user}
                ]
              }

        //     {path:'/users',component:users,
        //      children:[
        //         {path:'/username',name:'user', component:user}, 
        //      ]
        //    }
        ]
 })

 new Vue({
    router,
    template: `<div id="r">
                <div>${zyi} </div>
                <h1>导航</h1>
                <ol>
                  <li><router-link to='/'>home</router-link></li>

                  <ol>
                    <li>
                      <router-link :to='{path:"/users/wo",query:{aaa:"bbb"}}'>
                            wo
                      </router-link>
                    </li>
                  </ol>
                </ol>
                <router-view ></router-view>
              </div>`
  }).$mount('#app')